<script type="text/javascript">
    //主入口“饰品”，点击后选择一级子分类（判断是否为末层分类）
    function mainCatClick(me) {
        var parent = me.parents("dd");
        var html = '<div class="selectBox" style="display: inline-block"></div>' +
                '<div id="attrBox">' +
                '</div>' ;
        $(".selectBox").remove();
        $("#attrBox").remove();
        parent.append(html);
        getCatSons(me);
    }

    function getCatSons(me){
        var id = me.val();
        $.get(
            "{{ path('getCatSons') }}?id=" + id,
            function (data) {
                if (data.d) {
                    var catSons = addSelect( data.d , "getCatSons($(this))" , data.i );
                    $(".selectBox").append(catSons);
                    {% if catData is defined %}
                        var me = $(".rule-single-select select[title='"+data.i+"']");
                        {% for catId in catData.cat %}
                            if(me.find("option[value='{{ catId }}']").val() != undefined){
                                var val = $(catSons).find("option[value='{{ catId }}']").val();
                                me.val(val);
                            }
                        {% endfor %}
                        getCatSons(me);
                    {% endif %}

                    $(".rule-single-select").ruleSingleSelect();
                }
            }
        );
        getCatAttr(me);
    }
    function getCatAttr(me){
        var id = me.val();
        //获取到之后先把不需要的数据清除
        var parentid = me.attr("title");
        if (parentid != undefined) {
            $(".sonAttrBox_" + parentid).remove();
            do {
                var next = me.parent().next();
                var nextName = next.find("select").attr("title");
                next.remove();
                $(".sonAttrBox_" + nextName).remove();
            }while(nextName != undefined)
        }
        $.get(
            "{{ path('getCatAttr') }}?id=" + id,
            function (data) {
                if (data.d) {
                    //显示获取的属性
                    var catSons = addAttr( data.d , "" , data.i ,id);
                    $("#attrBox").append(catSons);
                    {% if catData is defined %}
                        {% for attr in catData.attr %}
                            var me = $(".sonAttrBox_"+ data.i +" select option[value='{{ attr.valId }}']").parent();
                            me.val({{ attr.valId }});
                        {% endfor %}
                    {% endif %}
                    $(".rule-single-select").ruleSingleSelect();
                    //为了美观重新调整下高度
                    var divs = $(".attrs");
                    var maxHeight = 0;
                    for (m in divs) {
                        if (divs[m].offsetHeight > maxHeight) {
                            maxHeight = divs[m].offsetHeight;
                        }
                    }
                    divs.height(maxHeight + "px");
                    divs.top("0px");
                }
            }
        );
    }

    function addSelect(datas ,action ,cid){
        var html = '' ;
        html +=  '<div class="rule-single-select">';
        html +=  '<select title="' + cid + '" id="" sucmsg="" onchange="'+action+'">';
        html +=  '<option value="">请选择</option>';
        for (i in datas) {
            html +=  '<option value="'+datas[i]["id"]+'">'+datas[i]["name"]+'</option>';
        }
        html +=  '</select>';
        html +=   '</div>';
        return html;
    }

    function addAttr(datas , action , pparentid ,parentid){
        var html = "<div class='attrs sonAttrBox_"+pparentid+"' style='float: left;padding-right: 30px;'>";
        for ( n in datas) {
            var attr = datas[n]["key"];
            var vals = datas[n]["val"];
            html += '<div style="height: 40px;line-height: 40px;">';
            html +=  '<div class="rule-single-select">';
            html +=  '<select name="attrs['+parentid+']['+attr["id"] + ']" id="" sucmsg="" onchange="'+action+'" datatype="*">';
            html +=  '<option value="">请选择['+attr["name"] + ']</option>';
            for (i in vals) {
                html +=  '<option value="'+vals[i]["id"]+'">'+vals[i]["name"]+'</option>';
            }
            html +=  '</select></div></div>';
        }
        html +=   '</div>';
        return html;
    }
    {% if catData is defined %}
        $(function () {
            var me = $("#form_cid").val(1);
            mainCatClick(me);
        });
    {% endif %}
</script>